<template>
  <div class="orderInfo page flex-col">
    <div class="order-tip justify-center items-center">
      <u-notice-bar
        text="温馨提示：请确保本次租赁服务是在本人自愿的条件下下单，下单人需承担缴纳租金责任以及逾期后面所面临的的法律诉讼，利用平台进行贷款交易是违法行为，若发现以上行为，请联系平台提供线索或报警处理！"
      ></u-notice-bar>
    </div>
    <div class="address-data common" @tap="goAddress">
      <!-- <div class="info flex-col" v-if="info.address && info.address.telephone"> -->
      <div class="addresslist">
        <div class="address-icon">
          <img src="../../static/icones/type11.png" alt="" />
        </div>
        <div class="info flex-col">
          <div class="name">
            {{ info.address.name || "接口方" }}
            {{ info.address.telephone || "13625462542" }}
          </div>
          <div class="address-text">
            {{ info.address.detailedAddress || info.address.address }}
          </div>
        </div>
        <!-- <div class="name">
          {{ info.address.name }} {{ info.address.telephone }}
        </div>
        <div class="address-text">
          {{ info.address.detailedAddress || info.address.address }}
        </div> -->
      </div>
      <!-- <div class="add-address items-center" v-else>
        <span>+添加收货地址</span>
      </div> -->
    </div>
    <div class="mail items-center common">
      <label class="label">个人邮箱<span class="icon">*</span></label>
      <div class="input">
        <input
          type="text"
          class="input-box"
          v-model.trim="mail"
          placeholder="点击填写真实邮箱，以便查收账单信息"
        />
      </div>
    </div>
    <div class="emails">为保障您的权益，租赁合同和账单将发送至您的邮箱</div>
    <div class="order-item common flex-col">
      <div class="content flex">
        <div class="left justify-center items-center">
          <img
            :src="info.coverUrl || changeUrl"
            alt=""
            class="pic"
            mode="aspectFit"
          />
        </div>
        <div class="right flex-col">
          <p class="goods-title ellipsis_1">
            {{
              info.goodsName ||
              "小米 Air 13.3寸小米 Air 13.3寸小米 Air13.3寸小米 Air 13.3寸小米 Air 13.3寸"
            }}
          </p>
          <span class="spec">套餐：{{ info.specName }}</span>
          <div class="specss">
            <!-- <span class="rang-date spec"
              >租期:{{ info.startEndTimeString }}</span
            > -->
            <span class="num spec">X{{ info.num || 1 }}</span>
          </div>
        </div>
      </div>
      <div class="previewes">
        <div class="preview">
          <div class="item">
            <img src="../../static/icones/icon13.png" alt="" class="icon" />
            <div class="flex-col day-info">
              <span class="name">预计起租日</span>
              <span class="date">{{ beginDate || "2021/11/12" }}</span>
            </div>
          </div>
          <div class="item">
            <img src="../../static/icones/icon14.png" alt="" class="icon" />
            <div class="flex-col day-info">
              <span class="name">归还日</span>
              <span class="date">{{ endDate || "" }}</span>
            </div>
          </div>
        </div>
        <div class="previewbox">
          <img src="../../static/icones/icon15.png" alt="" />
        </div>
      </div>
    </div>
    <div class="free flex-col">
      <div class="top justify-between">
        <span class="name">首期实付租金</span>
        <span class="price">￥{{ firstRent }}</span>
      </div>
      <div class="bottom flex-col">
        <div class="item flex-row">
          <span class="name">优惠折扣</span>
          <span class="price" v-if="couponValue">￥{{ couponValue }}</span>
          <span class="price" v-if="!couponValue">暂无折扣</span>
          <img src="../../static/icones/icon4.png" alt="" />
        </div>
        <div class="item justify-between">
          <span class="name">剩余租期</span>
          <span class="price" v-if="info.rentStage - 1 > 0"
            >￥{{ (info.rentFee * 30 * info.num).toFixed(2) }}x{{
              info.rentStage - 1
            }}期</span
          >
          <span class="price" v-else>￥0</span>
        </div>
        <div class="item justify-between">
          <span class="name">尾款租期</span>
          <span class="price" v-if="info.rentStage - 1 > 0"
            >￥{{ (info.rentFee * 30 * info.num).toFixed(2) }}x{{
              info.rentStage - 1
            }}期</span
          >
          <span class="price" v-else>￥0</span>
        </div>
        <div class="item flex-row">
          <span class="name">总租金</span>
          <span class="price"
            >￥{{
              info.allRentFee - couponPrice > 0
                ? (info.allRentFee - couponPrice).toFixed(2)
                : 0.01
            }}</span
          >
        </div>

        <div class="item flex-row">
          <span class="name">配送方式</span>
          <span class="price">{{ deliveryType || "" }}</span>
        </div>
        <div class="item flex-row">
          <span class="name items-center" @tap="showBuyout = true"
            >到期买断金额<img
              src="../../static/icones/icon1.png"
              alt=""
              class="icon-s"
          /></span>
          <span class="price">￥{{ info.buyout || 0 }}</span>
        </div>
      </div>
    </div>
    <div class="free box flex-col" v-if="servers.length > 0">
      <div class="top justify-between">
        <span class="name">安心服务</span>
        <span class="price">￥{{ allService }}</span>
      </div>
      <div class="bottom flex-col">
        <div
          class="item justify-between"
          v-for="(item, index) in servers"
          :key="`service${index}`"
        >
          <span class="name">{{ item.addServiceName }}</span>
          <span class="price">￥{{ item.addServicePrice }}</span>
        </div>
      </div>
    </div>
    <div class="mailss common items-center">
      <label class="label">凭芝麻信用最高可减免押金</label>
      <div class="input">￥{{ info.deposit || "" }}</div>
    </div>
    <div class="free flex-col">
      <div class="top justify-between">
        <span class="name">其他服务</span>
        <span class="price">￥{{ info.addServicePrice || "" }}</span>
      </div>
      <div class="bottom flex-col">
        <!-- <div
          class="item justify-between"
          v-for="(item, index) in servers"
          :key="`service${index}`"
        >
          <span class="name">{{ item.addServiceName }}</span>
          <span class="price">￥{{ item.addServicePrice }}</span>
        </div> -->
        <div class="item flex-row">
          <span class="name">{{
            item.addServiceName || "电脑包（需要归还）"
          }}</span>
          <span class="price">￥{{ item.addServicePrice || 0 }}</span>
        </div>
      </div>
    </div>
    <div class="mail common items-center">
      <label class="label">留言</label>
      <div class="input">
        <input
          type="text"
          class="input-box"
          placeholder="请输入您对本次订单的留言"
          v-model.trim="mark"
        />
      </div>
    </div>
    <!-- <radio :checked="checked" color="#0097FF" class="radio"></radio> -->
    <div class="bottom-box bg-white flex-col">
      <div class="top items-center">
        <div class="radio-top" @tap="changeCheck">
          <img class="radio" :src="checked ? radioSelect : radio" alt="" />
        </div>
        <div class="select flex">
          我已阅读并同意<span class="sure" @tap="goPage(2)"
            >《租赁服务协议》</span
          >与<span class="sure" @tap="goPage(1)">《隐私协议》</span> 与<span
            class="sure"
            @tap="goPage(3)"
            >《数字证书使用协议》</span
          >
        </div>
      </div>
      <div class="bottom items-center">
        <div class="label-lf">
          <div class="label1">
            <label class="label">首期实付租金：</label>
            <span class="text">￥{{ firstRent }}</span>
          </div>
          <div class="label2" v-if="couponValue">
            <label class="label lab">立减</label>
            <span class="text">￥{{ couponValue || "9" }}</span>
          </div>
        </div>
        <div class="btn" @tap="save">去免押</div>
      </div>
    </div>

    <!-- 优惠券 -->
    <!-- <GoodsQuan
      ref="coupon"
      @use="useCoupon"
      :info="info"
      :selectId.sync="couponId"
    /> -->

    <!-- 买断 -->
    <!-- <BuyoutDialog v-model="showBuyout" /> -->
  </div>
</template>
<script>
// import GoodsQuan from "./components/goodsQuan";
// import BuyoutDialog from "@components/buyoutDialog";
export default {
  name: "confirmOrder",
  // components: { GoodsQuan, BuyoutDialog },
  data() {
    return {
      info: {},
      params: {},
      checked: false,
      couponPrice: 0,
      servers: [],
      goodsInfo: {},
      mail: "",
      mark: "",
      beginDate: "",
      couponId: "",
      couponValue: 0,
      copId: "",
      copValue: 0,
      sessionId: "",
      code: "",
      couponType: "",
      radio:
        "https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/common/radio.png",
      radioSelect:
        "https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/common/radio-select.png",
      showBuyout: false,
      changeUrl: "../../static/icones/pic1.png",
    };
  },
  onShow() {
    const address = this.$store.getters["order/getAddress"];
    if (address) {
      this.info.address = address;
    }
    // this.$http
    //   .request({ url: "/orderMq/getOrderPayOkSendMsgAble.json" })
    //   .then((res) => {
    //     const { data } = res;
    //     console.log(555555555555, data);
    //     if (data.isAble === 1) {
    //       if (process.env.TARO_ENV === "alipay") {
    //         my.requestSubscribeMessage({
    //           //需要用户订阅的消息模板的id的集合
    //           entityIds: data.msgIds,
    //           success: (res) => {
    //             // res.behavior=='subscribe'
    //             console.log("接口调用成功的回调", res);
    //           },
    //           fail: (res) => {
    //             console.log("接口调用失败的回调", res);
    //           },
    //           complete: (res) => {
    //             console.log("接口调用结束的回调", res);
    //           },
    //         });
    //       }
    //     }
    //   });
  },
  mounted() {
    // const { id } = this.$query();
    // const { goodsInfo, addServices, ...params } =
    //   this.$store.getters["order/getOrderInfo"](id) || {};
    // this.params = params;
    // this.servers = addServices;
    // this.goodsInfo = goodsInfo;
    this.getComfirm();
    this.getmail();
    // this.beginDate = this.$utils.getDate(Date.now(), 2);
  },
  created() {
    // this.sessionId = this.$taro.getStorageSync("sessionId");
    my.getAuthCode({
      scopes: "voucher_query",
      success: (res) => {
        this.code = res.authCode;
        console.log(this.code, "295---");
      },
    });
  },
  computed: {
    firstRent() {
      const { actualFee } = this.info;
      const afterCoupon =
        actualFee - this.couponValue > 0 ? actualFee - this.couponValue : 0.01;
      return afterCoupon > 0 ? afterCoupon.toFixed(2) : 0.01;
    },
    allService() {
      return this.servers.reduce(
        (total, item) => total + item.addServicePrice,
        0
      );
    },
    deliveryType() {
      return this.goodsInfo.deliveryTypeString
        ? this.goodsInfo.deliveryTypeString.join(" | ")
        : "";
    },
    endDate() {
      // return this.$utils.getDate(Date.now(), this.info.rentDay + 1);
    },
  },
  methods: {
    changeCheck() {
      this.checked = !this.checked;
    },
    getmail() {
      // this.$http
      //   .request({
      //     url: "/order/getPostbox.json",
      //   })
      //   .then(({ data }) => {
      //     this.mail =
      //       data.postbox && data.postbox !== "null" ? data.postbox : "";
      //   });
    },
    getComfirm() {
      // this.$http
      //   .request({
      //     url: "/order/confirmOrderInfo.json",
      //     data: this.params,
      //   })
      //   .then(({ data }) => {
      //     this.info = data;
      //     // console.log(this.info,this.sessionId,'323');
      //   });
    },
    showCoupon() {
      // this.$taro
      //   .showLoading({
      //     title: "加载中...",
      //   })
      //   .then((res) => {
      //     setTimeout(() => {
      //       this.$taro.hideLoading();
      //     }, 2000);
      //   });
      // this.$refs.coupon.showCoupon({
      //   goodsId: this.info.goodsId,
      //   allRentFee: this.info.allRentFee.toString(),
      //   rentDay: this.info.rentDay,
      //   sessionId: this.sessionId,
      // });
    },
    save() {
      if (!this.checked) {
        return this.$toast("请先阅读并同意协议");
      }
      console.log(this.info.address);
      if (!this.info.address.id) {
        return this.$toast("请先选择地址");
      }
      if (!this.mail) {
        return this.$toast("请先输入邮箱");
      }
      if (!this.$utils.isEmail(this.mail)) {
        return this.$toast("邮箱格式不正确，请重新输入");
      }

      const orderData = {
        couponIds: this.couponId,
        couponType: this.couponType,
        // voucherId: this.copId,
        code: this.code,
        goodsId: this.info.goodsId,
        addServiceIds: this.params.addServiceIds,
        addressId: this.info.address.id,
        formId: "",
        msg: "",
        num: this.params.num,
        rentDay: this.params.rentDay,
        riskResult: "", // 风险识别
        specId: this.params.specId,
        userMessage: this.mark,
        postbox: this.mail,
      };

      this.$store.dispatch("order/setReadyOrder", orderData);
      if (process.env.TARO_ENV === "alipay") {
        // 示例
        my.getAuthCode({
          // 订单服务授权：order_service。如需同时获取用户多项授权，可在 scopes 中传入多个 scope 值。
          scopes: ["order_service"],
          success: (res) => {
            // 订单服务授权成功
            this.$goPage("/pagesMy/orderAuth/index");
            console.log(res);
          },
          fail: (res) => {
            // 订单服务授权失败，根据自己的业务场景来进行错误处理
            console.log(res);
          },
        });
        //
      }
    },
    goAddress() {
      this.$goPage("/pagesMy/myAddress/index?select=true");
    },
    useCoupon(data) {
      console.log(data, "424");
      this.couponId = data.userCouponId;
      this.couponValue = data.formValue;
      this.couponType = data.type;
    },
    // useCoupons(data) {
    //   console.log(data,'933');
    //   this.copId = data.voucherId;
    //   this.couponValue = data.voucherUseRuleLiteInfo.fixVoucher.floorAmount;
    //   console.log(this.copValue,'400');
    // },

    goPage(type) {
      // const url = {
      //   1: "https://snyz.oss-cn-hangzhou.aliyuncs.com/document/PrivacyWorkAgreement.pdf",
      //   2: "https://snyz.oss-cn-hangzhou.aliyuncs.com/document/RentAgreement.pdf",
      //   3: "https://snyz.oss-cn-hangzhou.aliyuncs.com/document/ESignAgreement.pdf",
      // }[type];
      // this.$taro.downloadFile({
      //   url,
      //   success: ({ apFilePath, tempFilePath }) => {
      //     console.log(apFilePath || tempFilePath);
      //     this.$taro.openDocument({
      //       filePath: apFilePath || tempFilePath,
      //       fileType: "pdf",
      //       success: (res) => {
      //         console.log("打开成功");
      //       },
      //     });
      //   },
      // });
    },
  },
};
</script>
<style lang="scss">
.orderInfo {
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  background-color: #f5f5f5;
  padding: 12px 12px 138px;
  .common {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.02);
    background-color: #fff;
    padding: 15px;
    margin-top: 12px;
  }

  .order-tip {
    width: 100%;
    height: 29px;
    background-color: #ffe6d2;
    border-radius: 15px;
  }

  .address-data {
    width: 100%;
    min-height: 86px;
    display: flex;
    .addresslist {
      display: flex;
      align-items: center;
      .address-icon {
        width: 40px;
        height: 100%;
        img {
          width: 29px;
          height: 29px;
        }
      }
      .info {
        width: 85%;
        height: 100%;
        .name {
          margin-top: 12px;
          font-size: 14px;
          line-height: 20px;
        }
        .address-text {
          font-size: 12px;
          line-height: 17px;
          color: #555;
          margin-top: 6px;
          max-width: 325px;
        }
      }
    }

    .add-address {
      width: 30%;
      height: 100%;
      font-size: 14px;
      line-height: 21px;
      color: #157afe;
      font-family: PingFang SC Medium;
    }
  }

  .mail {
    width: 100%;
    min-height: 51px;
    padding: 15px;
    .label {
      color: #3d3d3d;
      font-size: 14px;
      font-family: PingFang SC Bold;
      .icon {
        color: #eb0a0a;
      }
    }

    .input {
      color: #9d9d99;
      font-size: 14px;
      margin-left: auto;
      .input-box {
        width: 260px;
        text-align: right;
      }
    }
  }
  .emails {
    color: #9d9d99;
    font-size: 12px;
    margin-top: 6px;
  }
  .order-item {
    width: 100%;
    min-height: 151px;
    margin-top: 12px;
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.02);
    border-radius: 10px;
    background: #ffffff;
    margin-bottom: 12px;
    .content {
      padding: 15px 15px 0;
      width: 100%;
      min-height: 107px;
      // border-bottom: 1px solid #e4e4e4;s
      .left {
        width: 82px;
        height: 82px;
        background-color: #f9f9f9;
        margin-right: 12px;
        .pic {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        flex: 1;
        .goods-title {
          color: #333333;
          font-size: 14px;
          max-width: 210px;
          line-height: 20px;
        }
        .spec {
          color: #aaaaaa;
          font-size: 12px;
          line-height: 17px;
          margin-top: 6px;
        }
        .specss {
          display: flex;
          justify-content: space-between;
        }
        .all-rang {
          width: 210px;
          color: #333333;
          font-size: 14px;
          font-weight: bold;
          line-height: 20px;
          margin-top: 6px;
          .num {
            margin-left: auto;
          }
        }
      }
    }
    .previewes {
      padding: 0 15px 6px;
      .preview {
        width: 100%;
        height: 67px;
        border-radius: 34px;
        background: #e7f1ff;
        box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.02);
        display: flex;
        align-items: center;
        padding: 11px 15px 5px;
        margin: 6px 0;
        .item {
          width: 50%;
          height: 100%;
          display: flex;
          align-items: center;
          .icon {
            width: 49px;
            height: 51px;
            margin-right: 10px;
          }
          .day-info {
            .name {
              color: #157afe;
              font-size: 14px;
              line-height: 21px;
              font-family: PingFang SC Bold;
            }
            .date {
              line-height: 18px;
              color: #3d3d3d;
              font-size: 12px;
              font-family: PingFang SC Medium;
            }
          }
        }
      }
      .previewbox {
        width: 100%;
        height: 30px;
        padding: 6px 0;
        img {
          width: 100%;
          height: 18px;
        }
      }
    }
  }
  .free {
    min-height: 75px;
    padding: 15px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.02);
    // margin-bottom: 12px;

    .top {
      font-size: 15px;
      line-height: 21px;
      color: #3d3d3d;
      height: 36px;
      font-family: PingFang SC Heavy;
      border-bottom: 1px solid #f5f5f5;

      .price {
        font-size: 18px;
        color: #eb0a0a;
        font-weight: bold;
        font-family: DINPro-Bold;
      }
      .name {
      }
    }

    .bottom {
      width: 100%;
      // min-height: 60px;
      // padding: 9px 12px;
      margin-top: 12px;

      .item {
        min-height: 28px;
        font-size: 14px;
        font-family: PingFang SC Medium;
        color: #3d3d3d;
        margin-bottom: 6px;
        width: 100%;
        line-height: 21px;
        align-items: center;
        img {
          width: 6px;
          height: 13px;
          margin-left: 6px;
        }
        &.top {
          color: #5d5d5d;
          margin-bottom: 13px;
        }

        &:last-child {
          margin-bottom: 0;
        }

        .price {
          margin-left: auto;
        }
        .icon-s {
          width: 14px;
          height: 14px;
          margin-left: 2px;
        }
      }
    }

    .free-msg {
      margin-top: 13px;
      font-size: 13px;
      line-height: 21px;
      color: #b0b0b0;

      .name {
        margin-left: 13px;
      }

      .price {
        margin-left: auto;
        margin-right: 12px;
      }
    }
  }
  .mailss {
    min-height: 51px;
    display: flex;
    justify-content: space-between;
    .label {
      color: #3d3d3d;
      font-size: 15px;
      font-family: PingFang SC Heavy;
      .icon {
        color: #157afe;
        font-size: 18px;
        font-family: DINPro-Bold;
      }
    }
  }

  .bottom-box {
    width: 100%;
    height: 126px;
    border-radius: 8px 8px 0 0;
    padding: 0 16px;
    margin-top: 8px;
    position: fixed;
    left: 0;
    bottom: 0;

    .top {
      height: 66px;
      color: #000000;
      font-size: 14px;
      border-bottom: 1px solid #f5f5f5;
      max-width: 100%;
      overflow: hidden;
      .radio-top {
        width: 25px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .name {
        font-weight: bold;
      }
      .radio {
        // font-size: 14px;
        width: 14px;
        height: 14px;
      }
      .select {
        width: 100%;
        padding: 12px 26px 0 6px;
        flex-wrap: wrap;
        .sure {
          color: #0096ff;
          height: 20px;
        }
      }
    }

    .bottom {
      height: 60px;
      width: 100%;
      .label {
        color: #555555;
        font-size: 12px;
        line-height: 17px;
        &.lab {
          color: #eb0a0a;
        }
      }

      .text {
        color: #ff5426;
        font-weight: bold;
        font-size: 16px;
        line-height: 22px;
      }

      .btn {
        width: 167px;
        height: 36px;
        line-height: 38px;
        border-radius: 18px;
        background-color: #0097ff;
        color: #ffffff;
        font-weight: bold;
        font-size: 14px;
        text-align: center;
        margin-left: auto;
      }
    }
  }

  // .shot {
  //   height: 102px;
  //   .top {
  //     font-size: 16px;
  //     line-height: 21px;
  //     color: #4A4A4A;
  //     margin-top: 11px;
  //     .text {
  //       color: #29B5FF;
  //       .flow {
  //         width: 16px;
  //         height: 16px;
  //         margin-left: 5px;
  //       }
  //     }
  //   }
  //   .item {
  //     font-size: 13px;
  //     font-family: PingFang SC;
  //     font-weight: 400;
  //     line-height: 21px;
  //     color: #B0B0B0;
  //     margin-bottom: 2px;
  //     .text {
  //       margin-left: auto;
  //     }
  //     .btn {
  //       width: 50px;
  //       height: 21px;
  //       background: #F1F1F1;
  //       border: 1px solid #8F8F8F;
  //       border-radius: 11px;
  //       margin-left: 7px;
  //       line-height: 21px;
  //       text-align: center;
  //     }
  //   }
  // }

  // .btns {
  //   height: 66px;
  //   padding: 0 20px;
  //   .btn {
  //     width: 100px;
  //     height: 36px;
  //     border: 1px solid #29B5FF;
  //     border-radius: 18px;
  //     text-align: center;
  //     line-height: 36px;
  //     font-size: 16px;
  //     color: #29B5FF;
  //   }
  // }
  @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
}
</style>
